<script setup lang="ts">
import { useFlow } from '@/hooks/useFlow'
import { formatDate, formatDuration } from '@/utils/timeUtils'
// 定义组件的属性
interface Props {
  currentProcess?: {
    status?: string
    categoryName?: string
    endTime?: string
    durationInMillis?: number
    name?: string
  }
  idValue?: string
}
withDefaults(defineProps<Props>(), {
  currentProcess: () => ({}),
  idValue: '',
})

// 使用流程hook
const { navigateToProcessRecords } = useFlow()
</script>

<template>
  <view class="w-full bg-blue-500 p-4">
    <view class="mt-2 rounded-1 bg-white p-5 line-height-8">
      <view class="flex items-center justify-between text-4">
        <text> {{ currentProcess?.name }}</text>
        <ApprovalStatusTag :value="Number(currentProcess?.status)" type="tag" class="mr-[5rpx] mt-[5rpx]" />
      </view>
      <!-- <view>审批人：{{ currentProcess?.categoryName || '-' }}</view> -->
      <view>审批时间：{{ currentProcess?.endTime ? formatDate(currentProcess.endTime, 'datetime_short') : '-' }}</view>
      <view>审批耗时：<text class="text-4">{{ currentProcess?.durationInMillis ? formatDuration(Number(currentProcess.durationInMillis)) : '-' }}</text></view>
    </view>

    <view class="mt-2 flex items-center justify-between rounded-1 bg-white p-2 py-2.5 active:bg-gray-100" @click="navigateToProcessRecords(idValue)">
      <text class="text-4 line-height-5">
        <i class="inline-block h-2 w-2 rounded-full bg-amber line-height-4" />
        点击查看全部审批记录
      </text>
      <i class="i-solar:round-double-alt-arrow-right-broken" />
    </view>
  </view>
</template>

<style scoped>
/* 组件样式 */
</style>
